<template>
  <div>
    <!-- class="main-el-contarner" -->
    <el-container>
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <!-- <el-form-item label="事件等级：" label-width="90px">
                                <el-select v-model="param.warnStatus" placeholder="事件等级" size="small" style="width:150px;">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="禁用" value="0"></el-option>
                                </el-select>
                            </el-form-item> -->
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入设备名称关键字检索"
                  clearable
                  v-model="param.name"
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch"
                  >查找</el-button
                >
              </el-form-item>

              <el-form-item style="float: right">
                <el-button size="mini" type="primary" plain @click="handleAdd"
                  ><i class="el-icon-download"></i> 导出数据</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              border
              stripe
              ref="talbes"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="device_name" label="设备名称">
              </el-table-column>
              <el-table-column prop="device_model" label="设备型号">
              </el-table-column>
              <el-table-column prop="device_site" label="地理区域">
              </el-table-column>
              <el-table-column prop="install_site" label="安装位置">
              </el-table-column>
              <el-table-column prop="control_action" label="联动动作">
              </el-table-column>
              <el-table-column prop="active_status" label="启用状态">
                <template #default="scope">
                  <span v-if="scope.row.active_status == 0">启用</span>
                  <span v-if="scope.row.active_status == 1">禁用</span>
                </template>
              </el-table-column>
              <el-table-column prop="active_times" label="启用频率">
                <template #default="scope">
                  <span v-if="scope.row.active_status == 0">单次</span>
                  <span v-if="scope.row.active_status == 1">持续调用</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="start_date"
                label="开始时段"
                :formatter="dateFormat"
              >
              </el-table-column>
              <el-table-column
                prop="end_date"
                label="结束时段"
                :formatter="dateFormat"
              >
              </el-table-column>
              <el-table-column prop="interval_unit" label="时间单位">
                <template #default="scope">
                  <span v-if="scope.row.interval_unit == '0'">分</span>
                  <span v-if="scope.row.interval_unit == '1'">时</span>
                  <span v-if="scope.row.interval_unit == '2'">天</span>
                  <span v-if="scope.row.interval_unit == '3'">月</span>
                  <span v-if="scope.row.interval_unit == '4'">年</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="active_period" label="启用时间段">
                            </el-table-column> -->
              <el-table-column prop="interval_time" label="间隔时间">
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="deleteClick(scope.row)"
                    style="color: #ff0000"
                    ><i class="el-icon-delete"></i>删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SideHeader from '@/views/inc/SideHeader'
import Navlanmu from '@/views/inc/Navlanmu'
import LeftMenuMessage from '@/views/inc/LeftMenuMessage'
import { downloadCallback } from '@/utils/index.js'
import { getlist, getexpro, getdeletes } from '@/api/message/list'
import moment from 'moment'

export default {
  props: {
    controlEvent: {
      type: String,
      default: '',
    },
  },
  name: 'Eventinform',
  components: { SideHeader, Navlanmu, LeftMenuMessage },
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: {
        funId: 'msg_event_control',
        baseSQL: '',
        warnStatus: '',
        name: '',
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      selectionChangeData: '',
      event_id: this.controlEvent,
    }
  },
  mounted() {
    //
    // this.getDatas()
  },
  created() {
    this.isloading = false
    this.getDatas()
  },
  methods: {
    deleteClick(info) {
      console.log(info)
      var tablefromdata = {
        funId: 'msg_event_control',
        ids: info.event_control_id,
      }
      this.$confirm(`确定删除${info.device_name}？, 是否删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          if (res.data.code == '200') {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.getDatas()
          } else {
            this.$message({
              message: '删除失败',
              type: 'error',
            })
          }
        })
      })
    },
    // 复选框按钮
    selectionChange(e) {
      this.selectionChangeData = e
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e)
      const _selectData = this.$refs.talbes.selection
      this.selectionChange(_selectData)
    },
    handleAdd() {
      let fromData = {
        exportFields: [],
        ids: [],
        funId: 'msg_event_control',
      }
      //动态获取表头
      let fields = []
      this.$refs.talbes.$children.forEach((item) => {
        if (item.label != undefined && item.prop != undefined) {
          fields.push({
            title: item.label,
            value: item.prop,
          })
        }
        fromData.exportFields = JSON.stringify(fields)
      })
      //获取主键ID
      if (this.selectionChangeData.length != 0) {
        this.selectionChangeData.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ';'
          }
          // fromData.ids += item.event_control_id
          fromData.ids += item.event_id
        })
      } else {
        this.tabledatas.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ';'
            // console.log('fromData.ids',fromData.ids)
          }
          // fromData.ids += item.event_control_id
          fromData.ids += item.event_id
        })
      }
      downloadCallback(fromData, this.selectionChangeData.length)
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1
      this.getDatas()
    },
    getDatas() {
      // if (this.param.name == '') {
      //     this.param.baseSQL = ''
      // } else {
      this.param.baseSQL =
        'device_name like"%' +
        this.param.name +
        '%" and ' +
        'event_id like "%' +
        this.event_id +
        '%"'
      // }
      getlist(this.param).then((res) => {
        if (res.status == '200') {
          let resdata = res.data
          this.tabledatas = resdata.rows
          this.$emit('getEvencontrData', this.tabledatas)
          this.dataTotal = resdata.total
        }
      })
    },

    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1
    },
    sizeChange(val) {
      this.param.limit = val
      this.getDatas()
    },
    currentChange(val) {
      this.param.pageNo = val
      this.param.offset = (val - 1) * this.param.limit
      this.getDatas()
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('HH:mm')
    },
  },
}
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px 0px;
}

.pagebox {
  text-align: right;
  padding: 10px;
}
</style>
